<!-- component.vue.hbs -->
<script setup lang="ts">
import "/tinymce/js/tinymce/langs/zh_CN.js?url";
import { ref } from "vue";
import Editor from "@tinymce/tinymce-vue";

interface Props {
  // 在此定义 props 类型
  defaultVal: String;
}

const props = withDefaults(defineProps<Props>(), {});

const emit = defineEmits(["update:modelValue"]);

// 编辑器内容绑定
const content = ref(props.defaultVal);

// TinyMCE 配置项
const initOptions = ref({
  height: 500,
  menubar: true,
  plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table paste code help wordcount",
  ],
  toolbar:
    "undo redo | formatselect | bold italic backcolor | \
    alignleft aligncenter alignright alignjustify | \
    bullist numlist outdent indent | removeformat | help",
  // 本地皮肤配置（需提前放置 skins 文件）
  // skin: 'oxide', // 或自定义皮肤名称,
  skin_url: "/tinymce/js/tinymce/skins/ui/oxide", // 皮肤路径
  content_css: "/tinymce/js/tinymce/skins/content/default/content.css",
  language: "zh_CN",
  // 图片上传配置
  images_upload_handler: async (blobInfo) => {
    const formData = new FormData();
    formData.append("file", blobInfo.blob(), blobInfo.filename());
    // 调用后端接口上传图片
    const response = await fetch("/api/upload", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return data.url; // 返回图片 URL
  },
});

defineExpose({
  content,
});
</script>

<template>
  <div class="RichEditor">
    <!-- 组件内容 -->
    <!-- TinyMCE 编辑器组件 -->
    <Editor
      v-model="content"
      :init="initOptions"
      api-key="lgjfhr7aq7lotyqjzkzt89b3u3vvyl9m3swui8fkr8oby41e"
    />
  </div>
</template>

<style scoped lang="scss">
.RichEditor {
  /* 组件样式 */
}
</style>
